// @mixin flex($layout) {
// 	display: flex;
// 	justify-content: $layout;
// 	align-items: $layout;
// 	@content;
// }
// .nav{
// 	@include flex(start){
// 		height: 50px;
// 	}
// }
// .header{
// 	width: 100%;
// 	@include flex(center){
// 		color:red;
// 	}
// }
$beankpoints:(
	phone:(320px,480px),
	pad:(481px,768px),
	notebook:(769px,1024px),
	desktop:(1025px,1200px),
	tv:1201px
);
@mixin responseTo($dname) {
	$bp:map-get($beankpoints,$dname);
	@if type-of($bp) == 'list'{
		@media (min-width:nth($bp,1)) and (max-width:nth($bp,2)) {
			@content;
		}
	}@else{
		@media (min-width:$bp){
			@content;
		}
	}
}
.header{
	width: 100%;
	@include responseTo('phone'){
		height: 50px;
	}
	@include responseTo('pad'){
		height: 60px;
	}
	@include responseTo('notebook'){
		height: 80px;
	}
	@include responseTo('desktop'){
		height: 100px;
	}
	@include responseTo('tv'){
		height: 120px;
	}
}